<template>
    <div>
        <div class=" header main">
        <span id="header">
                        <span>
                            <span>{{mname}}</span>
                            <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                            <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
                        </span>
                    </span>
            <div style="width: 80%">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         active-text-color="red"
                         style="font-weight:bold">
                    <el-menu-item index="2" @click="$router.push('/shouye')">首页</el-menu-item>
                    <el-menu-item index="1" @click="$router.push('/product')">商品展示</el-menu-item>
                    <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                    <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                    <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
                </el-menu>
            </div>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td class="topb">
                        <img src="../assets/img/1002.jpg" width="100%">
                    </td>
                </tr>
                </tbody>
            </table>
            <!--头部-->
            <br/>
            <center>
                <div STYLE="width: 900px;height: 520px;border: 2px solid lightgoldenrodyellow">
                    <div style=" border: 0.5px solid honeydew;width: 300px;margin-top: 40px;height: 400px;float: left">
                        <img style="width: 300px;height: 400px;" :src="getUrl(list.picPath)">

                    </div>
                    <div style="width: 500px; float: left;margin-top: 40px;margin-left: 30px;height: 400px;text-align: left;">
                        <h3 style="color: #52c9ff;font-size: 28px">{{this.list.labelName}}</h3>
                        <div STYLE="height: 40px;margin-top: 5px;background-color:lavender">
                            <!--                       <span style="font-size: 10px; line-height: 40px;margin-left: 5px">原价:</span>-->
                            <!--                       <span style="color:red;">${{this.list.price}}</span>-->
                            <span style="margin-left: 50px;font-size:10px;line-height: 40px;">价格:</span>
                            <span style="font-weight: 700;font-size: 25px;color: red;">${{this.list.price}}</span>
                            <div class="tableTitle" style="margin-top: 30px" ><span class="midText">详情</span></div>

                            <div style=" width: 400px; margin-top: 20px;height: 40px;margin-left: 30px">
                                <span style="color:darkred; font-size: 15px"> {{this.list.shortDesc}}</span><br/><br/>

                                <span style=" line-height: 40px;font-size: 10px;color: #a4a4a4">套餐类型 &nbsp;&nbsp;</span>
                                <template>
                                    <el-radio v-model="radio" label="1">官方套餐</el-radio>
                                </template>
                            </div>
                            <div style="width: 400px;height: 100px;margin-left: 30px">
                                <br/>
                                <h4 style=" line-height: 40px;font-size: 10px;color: #a4a4a4">
                                    库存 &nbsp;&nbsp;{{this.list.store}}
                                </h4>
                            </div>

                            <div style="width: 300px;height: 40px;margin-left: 160px;margin-top: -20px;">
                                <el-button type="danger" @click="gotoBuy()" plain>立即购买</el-button>
                                <el-button type="danger" @click="gotoCart()" style="margin-left: 20px">加入购物车</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </center>

            <!--  底部-->
            <div>
                <center>
                    <div style="width: 100%;border-top: 1px solid gainsboro;margin-top: 50px">
                        <div style="float: left;margin-left: 300px">
                            <img src="../assets/img/bu01.jpg">
                        </div>
                        <div style="float: left;">
                            <img src="../assets/img/bu02.jpg">
                        </div>
                        <div style="float: left;">
                            <img src="../assets/img/bu03.jpg">
                        </div>
                    </div>
                </center>
                <div class="img">
                    <img src="../assets/img/d0.png" style="width: 100%;">
                </div>
                <div class = "under">
                    <a href="#" target="_blank" rel="nofollow">免费声明 </a>
                    <a href="#" target="_blank" rel="nofollow">关于我们 </a>
                    <a href="#" target="_blank" rel="nofollow">支付方式 </a>
                    <a href="#" target="_blank" rel="nofollow">联系我们 </a>
                    <a href="#" target="_blank" rel="nofollow">营业执照 </a>
                    <a href="#" target="_blank" rel="nofollow">服务条款 </a>
                </div>
                <br>
                <div class="img">
                    <img src="../assets/img/d1.png" style="width: 100%;">
                </div>
                <div class="footer-edit">
                    <p style="line-height: 1.0em;">
                        <span style="color: rgb(165, 165, 165);">Copyright © 1999 河南AAA有限公司 地址：郑州市新郑市AAA软件教育</span>
                    </p>
                    <p style="line-height: 1.0em;">
                        <span style="color: rgb(165, 165, 165);"> 本网站部分图片来源于网络,如有侵权请联系我们,我们会尽快处理&nbsp;</span>
                    </p>
                    <p style="line-height: 1.0em;">
                        <span style="color: rgb(165, 165, 165);">&nbsp;</span>
                        <a href="http://www.baidu.com" target="_blank" style="color: rgb(165, 165, 165);">郑州昆旅国际旅行社太康路营业部</a></p>
                    <p style="line-height: 1.0em;">
                <span style="color: rgb(165, 165, 165);">服务热线0371-888888&nbsp;
                    <span style="color: rgb(165, 165, 165);">微信：18838965238&nbsp; 15981917089&nbsp;</span>
                    在线QQ：1479430525&nbsp; 1479430525&nbsp; &nbsp;</span></p>
                    <p style="line-height: 1.0em;">
                        <a href="https://www.baidu.com" target="_blank"></a>
                        <span style="color: rgb(165,165,165);">
                        <span style="color: rgb(153, 153, 153); font-family: PingFang SC;,Microsoft Yahei UI, Microsoft Yahei&quot;,Hiragino Sans GB;, Helvetica, STHeiti, sans-serif; background-color: rgb(249, 249, 249);">
                            旅行社业务经营许可证号 L-HEN-CJ00011
                        </span>
                    </span>
                        豫ICP备19990315号
                        <a/>
                    </p>
                </div>
            </div>
        </div>

    </div>
</template>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    export default {
        name: 'Xq',
        data () {
            return {
                principal: sessionStorage.getItem('token'),
                shoppingCart: {
                    phone: sessionStorage.getItem('username'),
                    tid: this.$route.params.tid
                },
                phone1: sessionStorage.getItem('username'),
                tid1: '',
                mname: '已登录',
                list: null,
                activeIndex: '1',
                price1:'',
                tid: this.$route.params.tid,
                // tid:'',
                radio: '1',
                tbOrdInf: {
                    tid:'',
                    status:0,
                    payType:'支付宝',
                    payStatus:1,
                    accountId:'',
                    shippingName:'',
                    shippingAddress:'',
                    shippingPhone:'',
                    postWay:'顺丰',
                    postFee:20.00,
                    totalPrice:'',
                    createBy:null,
                    updateBy:null,
                    updateDate:'',
                    remark:null,
                    version:0,
                    state:1
                },
                addressList: '',
            }
        },
        created () {
            // this.tid = this.$route.query.tid,
            this.$http.post(`product/product/findById/${this.tid}`).then(data => {
                console.log(data)
                this.list = data
                this.tbOrdInf.tid = data.tid;
                this.tbOrdInf.totalPrice = data.price * this.tbOrdInf.payStatus + this.tbOrdInf.postFee;
                this.tbOrdInf.accountId = sessionStorage.getItem('username');
            })
            if (this.principal === null) {
                this.mname = '未登录'
            }else{
                this.$http.post('order/address/findByTbid', {accountId: this.phone1}).then(data => {
                    this.addressList = data[0]
                    this.tbOrdInf.shippingName = data[0].realName
                    this.tbOrdInf.shippingAddress = data[0].realAddress
                    this.tbOrdInf.shippingPhone = data[0].realPhone
                })
            }
        },
        methods: {
            gotoBuy () {
                if (this.principal === null) {
                    this.$message({
                        type: 'info',
                        message: '请先登录!'
                    })
                    this.$router.push('/login')
                } else {
                    if (this.addressList === undefined){
                        this.$confirm('暂无默认地址，是否前往个人中心添加地址, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'success'
                        }).then(() => {
                            this.$router.push('/personalCenter')

                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消前往'
                            });
                        });
                    }else {
                        this.$http.post('product/product/compareStore', {tid: this.tbOrdInf.tid ,store: this.tbOrdInf.payStatus}).then(datadd => {
                            console.log(datadd);
                            if (datadd != ''){
                                this.$http.post('product/product/subtractStore', {tid: this.tbOrdInf.tid ,store: this.tbOrdInf.payStatus}).then(res => {
                                    if (res){
                                        this.$http.post('order/order/saveOrUpdate1',this.tbOrdInf).then(data => {
                                            if (data != null){
                                                this.$router.push({path:"/orderDetails",query:{oid:data}})
                                            }
                                        })
                                    }

                                })
                            }else {
                                this.$message({
                                    type: 'info',
                                    message: '很抱歉，库存不足！'
                                });
                            }
                        })
                    }
                }
            },
            gotoCart () {
                if (this.principal === null) {
                    this.$message({
                        type: 'info',
                        message: '请先登录!'
                    })
                    this.$router.push('/login')
                } else {
                    this.$http.post('product/shoppingCart/gotoCart', this.shoppingCart).then(data => {
                        if (data) {
                            // alert("数据改变");
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            })
                            this.$router.push('/shoppingCart')
                        } else {
                            this.$message({
                                type: 'info',
                                message: '添加失败!'
                            })
                            this.$http.post(`product/product/findById/${this.tid}`).then(data => {
                                this.list = data
                            })
                        }
                    })
                }
            },
            handleSelect (key, keyPath) {
                console.log(key, keyPath)
            },
            dd1 () {
                this.$router.push('/login')
            },
            output () {
                this.$router.replace('product')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/product/findProductPicByPath?name=` + picPath
            }
        }
    }
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }
    .tableTitle {
        position: relative;
        margin: 0 auto;

        height: 1px;
        background-color: #d4d4d4;
        text-align: center;
        font-size: 16px;
        color: rgba(101, 101, 101, 1);
    }
    .midText {
        position: absolute;
        left: 50%;
        background-color: #ffffff;
        padding: 0 15px;
        transform: translateX(-50%) translateY(-50%);
    }
</style>
